{{template "header"}}

	<title>{{.app}} Stat</title>
	<meta http-equiv="refresh" content='10'>
	</head>
	{{template "navbar" .}}
	<div class="container">
	<div class="table-responsive" style="margin-top:15px;">
			<table class="table table-hover table-bordered">
			<thead>
				<tr>
				<th style="text-align:center">Host</th>
				{{range .keys}}
				<th style="text-align:center">{{.}}</th>
				{{end}}
			<tr>
			</thead>
			<tbody>
				 {{range .data}}
					<tr>
					<td style="text-align:left{{if .Expired}};color:red{{end}}">{{.Host}} ({{.Name}})</td>
					{{range .Values}}
					<td class="stats" style="text-align:right">{{.Num}}({{.Rate}}/{{.MaxRate}}/{{.MinRate}})</td>
					{{end}}
					</tr>
				{{end}}
			</tbody>
			</table>
		</div>
        </div>
		<div class="container">
			{{if .kestrelStats}} 
			<div class="table-responsive" style="margin-top:15px;">
			<table class="table table-hover table-bordered">
			<thead>
				<tr>
				<th style="text-align:center">Host</th>
				<th style="text-align:center">Current Items</th>
				<th style="text-align:center">Total Items</th>
				<th style="text-align:center">Items Rate</th>
				<th style="text-align:center">Action</th>
			<tr>
			</thead>
			<tbody>
				 {{range .kestrelStats}}
					<tr>
					<td style="text-align:left">{{.Host}}</td>
					<td style="text-align:right">{{.CurrentItems}}</td>
					<td style="text-align:right">{{.TotalItems}}</td>
					<td style="text-align:right">{{.ItemsRate}}</td>
					<td style="text-align:center"><button id="delKestrel" name="{{.Host}}" type="button" class="btn btn-danger">Del</button></td>
					</tr>
				{{end}}
			</tbody>
			</table>
			{{end}}
		</div>
	</body>

<script type="text/javascript">
    $('#delKestrel').on('click', function(){
      window.location.href = 'kestrel/del?app=' + {{.app}} + "&host=" + this.name
    });
</script>
<script type="text/javascript">
        $(document).ready(function() {
            $('.stats').each(function(){
            	var cons = $(this).text();
            	var main1 = cons.substring(0,cons.indexOf("("));
            	var titles = cons.substring(cons.indexOf("(")+1,cons.indexOf(")"));
            	var titleN = titles.split("/")||[];
            	$(this).html(titleN[0]);
            	$(this).css("text-align","center");

            	var inHTML= "<h4>总数："+main1+"</h4>";
            	 inHTML +="<li style='list-style:none;'>速率："+ (titleN[0]||"")+"</li>";
            	 inHTML +="<li style='list-style:none;'>最大："+ (titleN[1]||"")+"</li>";
				 inHTML +="<li style='list-style:none;'>最小："+ (titleN[2]||"")+"</li>";


				$(this).tooltipster({
					contentAsHTML: true,
                    content: "<div"+inHTML+"</div>"
                });

            });
            	
        });
    </script>
</html>
